<template>
  <div class="container">
    <van-tabs v-model="active">
      <van-tab v-for="item,index in navs" :title="item" :key="index">
      <div class="list">
      	  <div class="item flex flex-col  bg-white mg-t" v-for="i in 10">
        	<div class="flex-row pd">
        		<img class="userpic flex-grow-0 mg-r" src="@/assets/images/3.jpg">
        		<div class="info flex-grow-1 flex-col">
        			<div>订单编号：<span class="subtit">122334</span></div>
        			<div>归还订单编号：<span class="subtit">122334</span></div>
        			<div>物流信息：<span class="subtit">已发货</span></div>
        			<div>申请退押时间：<span class="subtit">2018-02-25</span></div>
        			<div>申请退押金额：<span class="moneyColor">￥200</span></div>
        		</div>
        	</div>
        	<div class="flex-end pd-b bd-bottom">共计商品1件 合计：￥350.00(含运费0.00)</div>
        	<div class="flex btn-group flex-end pd">
	        	<van-button size="small" class="btn">催进度</van-button> <van-button size="small" class="btn" @click="detail">查看详情</van-button>
        	</div>
        </div>
      </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
	export default({
		data(){
			return{
				active:1,
				navs:["待退还押金","已退还押金","被驳回押金"]
			}
		},
		methods:{
			detail(){
				this.$router.push({name:'tuikuanshouhou',params:{id:2}})
			}
		}
	})
</script>
<style scoped lang="less">
.list{
	position:fixed;
	top:44px;
	bottom:0;
	left:0;
	width:100%;
	overflow-x: hidden;
    overflow-y: croll;
}
.van-tab--active {
  color: #F75B93;
}
.item{
	font-size:.5rem;
	img{
		width:4rem;
		height:4rem;
	}
}
.van-tabs__line {
  background-color: #F75B93;
}
.btn-group{
	display: flex;
	justify-content:flex-end;
}
.van-button--small{
	font-size: .5rem;
	margin-left:.3rem;
}
.pd{
	padding:.3rem;
}
.pd-b{
	padding-bottom:.3rem;
}
.btn{
	color:#F75B93;
	border:1px solid #F75B93;
}
</style>
